<template>
  <div id="globalArea"></div>
</template>
<script>
const data = [{ e: "CN", i: "SL", v: 7503968 }];

export default {
  name: "GioBall",
  data() {
    return {};
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 500);
  },
  methods: {
    init() {
      const container = document.getElementById("globalArea");

      const controller = new GIO.Controller(container);
      controller.configure({
        color: {
          selected: "#FFFFFF",
          background: "#90CAF9",
          halo: "#E3F2FD",
          ocean: 1.9,
        },
        control: {
          disableUnmentioned: true,
        },
      });
      controller.setStyle("magic");
      controller.setSurfaceColor("#DBDB");
      controller.setInitCountry("SL");
      controller.lightenMentioned(true);
      controller.adjustMentionedBrightness(0.8);
      // Add data
      controller.addData(data);
      // Initialize and render the globe
      controller.init();
    },
  },
};
</script>
<style>
#globalArea {
  width: 100%;
  height: 320px;
}
</style>
